<template>
  <div class="app-container">
    <!-- 搜索框 -->
    <!--    <SimpleDataSelect-->
    <!--      :search-data="search"-->
    <!--      :button-data="buttonData"-->
    <!--      :drop-down-btn="dropButtonData"-->
    <!--      @return-search="searchList"-->
    <!--      @return-reset="reset('search')"-->
    <!--    />-->
    <data-select
      :search-data="search"
      :button-data="buttonData"
      @return-search="searchList"
      @return-reset="reset"
    />
    <!-- 表格 -->

    <!--      :button-data="buttonData"-->
    <data-table
      :table-data="tableData"
      :column="column"
      :pagination.sync="pagination"
      @search-event="getListBySearch"
    >
      <!-- 这是自定义插槽例子     <template v-slot:userName="{row}"><el-input v-model="row.userName" /></template>-->
      <!--          <template v-slot:userName="{row}">-->
      <!--            <table-rules :value="row" required :rules="rules1">-->
      <!--              <el-input v-model="row.userName" />-->
      <!--            </table-rules>-->
      <!--            <table-rules :value="row" required :rules="rules2">-->
      <!--              <el-input v-model="row.telephone" />-->
      <!--            </table-rules>-->
      <!--          </template>-->
    </data-table>

    <!-- 弹框 -->
    <detail
      ref="detail"
      @resetList="getListBySearch"
    />
    <!-- 角色分配 -->
    <auth-role
      ref="authRole"
      @resetList="getListBySearch"
    />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import DataSelect from '@/components/DataSelect'
// import SimpleDataSelect from '@/components/SimpleDataSelect'
import DataTable from '@/components/DataTable'
import detail from './detail'
import authRole from './authRole'
import merchantApi from '@/api/tenant/merchant'
// import TableRules from '@/components/DataTable/tableRules'
export default {
  name: '',
  components: {
    // TableRules,
    // SimpleDataSelect,
    DataSelect,
    DataTable,
    detail,
    authRole
  },
  data() {
    return {
      // search: {
      //   key: 'userName',
      //   label: this.$t('common.enter'),
      //   value: null
      // },
      // 表格多输入框
      // rules1: {
      //   userName: {
      //     required: true,
      //     validator: (rule, value, callback) => {
      //       this.$util.validIpt(value, callback, 'tel')
      //     },
      //     trigger: ['blur', 'change']
      //   }
      // }, rules2: {
      //   telephone: {
      //     required: true,
      //     validator: (rule, value, callback) => {
      //       this.$util.validIpt(value, callback, 'tel')
      //     },
      //     trigger: ['blur', 'change']
      //   }
      // },
      dialogRule: {
        userName: {
          required: true,
          message:
            this.$t('common.enter') + this.$t('tenant.userManage.telephone'),
          trigger: ['blur', 'change']
        }
      },
      // 搜索框参数
      search: {
        userName: {
          label: this.$t('tenant.userManage.userName'),
          value: null,
          type: 'input'
        },
        telephone: {
          label: this.$t('tenant.userManage.telephone'),
          value: null,
          type: 'input'
        }
      },
      // 表格上方操作按钮，比如新增
      buttonData: [
        {
          label: this.$t('common.create'),
          permission: 'userManage:add',
          action: this.add
        }
      ],
      // 表格参数
      column: {
        // 表头
        data: [
          {
            label: this.$t('tenant.userManage.index'),
            prop: 'index',
            show: true
          },
          {
            label: this.$t('tenant.userManage.userName'),
            prop: 'userName',
            show: true
            // ,
            // slotName: 'userName'
          //   required: true,
          //   rules: {
          //     userName: {
          //       required: true,
          //       validator: (rule, value, callback) => {
          //         this.$util.validIpt(value, callback, 'tel')
          //       },
          //       trigger: ['blur', 'change']
          //     }
          },
          {
            label: this.$t('tenant.userManage.telephone'),
            prop: 'telephone',
            show: true
          },
          {
            label: this.$t('tenant.userManage.email'),
            prop: 'email',
            show: true
          },
          {
            label: this.$t('tenant.userManage.sex'),
            prop: 'sex',
            show: true,
            format: (row) => {
              // eslint-disable-next-line eqeqeq
              return row.sex == '1' ? '男' : row.sex == '2' ? '女' : ''
            }
          },
          {
            label: this.$t('tenant.userManage.status'),
            prop: 'status',
            show: true,
            format: (row) => {
              // eslint-disable-next-line eqeqeq
              return row.status == '1' ? this.$t('common.enable') : this.$t('common.unenable')
            }
          }
        ],
        // 表格中的操作列
        operation: {
          label: this.$t('common.operation'),
          width: 280,
          data: (row) => {
            const list = [
              {
                label: this.$t('common.edit'),
                permission: 'userManage:edit',
                action: this.edit
              },
              {
                label: this.$t('tenant.userManage.role'),
                permission: 'userManage:role',
                action: this.role
              },
              {
                label: this.$t('tenant.userManage.resetPwd'),
                permission: 'userManage:resetPwd',
                action: this.resetPwd
              }
            ]
            // eslint-disable-next-line eqeqeq
            if (row.status == '1') {
              list.push({
                label: this.$t('common.unenable'),
                permission: 'userManage:unenable',
                action: this.status
              })
            } else {
              list.push({
                label: this.$t('common.enable'),
                permission: 'userManage:enable',
                action: this.status
              })
            }
            return list
          }
        }
      },
      // 分页
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      searchData: {},
      tableData: []
    }
  },
  computed: {
    ...mapState({
      merchantCode: state => state.user.merchantCode
    })
  },
  watch: {
    pagination: {
      handler(val) {
        console.log('pagination')
        console.log(val)
      },
      deep: true
    }
  },
  mounted() {
    // this.getListBySearch();
  },
  created() {
    if (this.$route.params.parentSearch) {
      const parentSearch = this.$route.params.parentSearch
      this.searchData = parentSearch
      this.setSearch(parentSearch)
    }
    this.$nextTick(() => {
      this.getListBySearch()
    })
  },
  methods: {
    // 插槽例子方法
    // changeRow() {
    //   console.log(this.tableData)
    // },
    // 获取列表数据
    getListBySearch() {
      this.searchData.allFlag = false
      this.searchData.merchantCode = this.merchantCode
      const param = Object.assign(this.searchData, this.pagination)
      merchantApi.getUserListByPage(param).then(res => {
        this.tableData = res.data.list
        this.pagination = res.data.pagination
      })
    },
    // 重置
    reset(type) {
      this.pagination.pageNum = 1
      this.searchData = {}
      this.getListBySearch()
    },
    // 给搜索组件赋值
    setSearch(parentSearch) {
      for (const key in this.search) {
        const val = this.search[key]
        // eslint-disable-next-line eqeqeq
        if (val.constructor == Object) {
          console.log(parentSearch)
          for (const parentKey in parentSearch) {
            const parent = parentSearch[parentKey]
            // eslint-disable-next-line eqeqeq
            if (key == parentKey) {
              this.search[key].value = parent
            }
          }
        }
      }
    },
    // 确定
    confirm(data) {
      // eslint-disable-next-line eqeqeq
      if (this.dialogTitle == this.$t('common.create')) {
        data.merchantCode = this.merchantCode
        merchantApi.addUser(data).then(res => {
          this.$message.success(this.$t('common.addSuccess'))
          this.dialogVisible = false
          this.getListBySearch()
        })
        // eslint-disable-next-line eqeqeq
      } else if (this.dialogTitle == this.$t('common.edit')) {
        merchantApi.updateUser(data).then(res => {
          this.$message.success(this.$t('common.editSuccess'))
          this.dialogVisible = false
          this.getListBySearch()
        })
      }
    },
    searchList(data) {
      this.pagination.pageNum = 1
      this.searchData = data
      this.getListBySearch()
    },
    add(data) {
      this.$refs.detail.info = {
        telephone: '',
        userName: '',
        email: '',
        sex: '1',
        userType: '',
        storeList: [],
        store: null,
        areaCode: null
      }
      this.$nextTick(() => {
        this.$refs.detail.title = this.$t('common.create')
        this.$refs.detail.show()
      })
    },
    edit(data) {
      merchantApi.getUserDetail(data.id).then(res => {
        this.$refs.detail.info = res.data
        // 处理区域
        if (res.data.areaCode) {
          merchantApi.getUserAreaList().then(res => {
            this.$refs.detail.areaList = res.data
          })
        }
        // 处理storeList
        if (res.data.storeList) {
          const store = res.data.storeList.map(v => {
            return v.storeCode
          })
          this.$refs.detail.info.store = store
          merchantApi.getBatchGetStoreList({ storeCodeList: store }).then(res => {
            this.$refs.detail.storeOption = res.data.data
          })
        }
        this.$nextTick(() => {
          this.$refs.detail.title = this.$t('common.edit')
          this.$refs.detail.show()
        })
      })
    },
    role(data) {
      merchantApi.getRoleById(data.id).then(res => {
        this.$refs.authRole.selectRole = res.data
        this.$refs.authRole.userId = data.id
        this.$refs.authRole.user = data
        this.$refs.authRole.show()
      })
    },
    resetPwd(data) {
      this.$confirm(this.$t('tenant.userManage.confirmResetPwd'), this.$t('common.prompt'), {
        confirmButtonText: this.$t('common.ok'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning',
        closeOnClickModal: false
      })
        .then(() => {
          merchantApi.resetPwd({ id: data.id, passwordOperationType: 'RESET' }).then(res => {
            this.$message.success(this.$t('tenant.userManage.resetPwdSuccess'))
            this.getListBySearch()
          })
        })
        .catch(() => { })
    },
    status(data) {
      // eslint-disable-next-line eqeqeq,no-case-declarations
      const status = data.status == '1' ? '0' : '1'
      // eslint-disable-next-line eqeqeq
      this.$confirm(this.$t('common.confirm') + (status == '1' ? this.$t('common.enable') : this.$t('common.unenable')), this.$t('common.prompt'), {
        confirmButtonText: this.$t('common.ok'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning',
        closeOnClickModal: false
      })
        .then(() => {
          merchantApi.updateStatus({ id: data.id, status: status }).then(res => {
            this.$message.success(this.$t('common.operationSuccess'))
            this.getListBySearch()
          })
        })
        .catch(() => {

        })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

